<template>
    <div class="table">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-lx-calendar"></i>系统设置</el-breadcrumb-item>
                <el-breadcrumb-item>角色管理</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="handle-box">
                <el-input v-model="select_word" placeholder="角色名称" class="handle-input mr10"></el-input>
                <el-button type="primary" icon="search" @click="search">搜索</el-button>
            </div>
            <div class="handle-box">
                <el-button type="primary" icon="delete" class="handle-del mr10" @click="handleAdd()">新建</el-button>
            </div>
            <el-table :data="data" border class="table" ref="multipleTable" @selection-change="handleSelectionChange" :row-class-name="tableRowClassName">
                <el-table-column type="selection" width="55" align="center"></el-table-column>
                <el-table-column prop="roleId" label="角色编号" align="center" width="150">
                </el-table-column>
                <el-table-column prop="roleName" label="角色名称" width="120" align="center">
                </el-table-column>
                <el-table-column prop="manager" label="更新操作员" width="200" align="center">
                </el-table-column>
                <el-table-column prop="notices" label="备注" width="120" align="center" >
                </el-table-column>
                <el-table-column label="操作" width="180" align="center">
                    <template slot-scope="scope">
                        <el-button type="text" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                        <el-button type="text" icon="el-icon-delete" class="red" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                  background
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="currentPage"
                  :page-sizes="[10, 20, 30, 40]"
                  :page-size="10"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="1000">
                </el-pagination>
                </el-pagination>
            </div>
        </div>

        <!-- 新增弹出框 -->
        <el-dialog title="新增角色" :visible.sync="addVisible" width="30%">
            <el-form ref="addform" :model="addform" label-width="100px">
                <el-form-item label="角色编号">
                    <el-input v-model="addform.roleId"></el-input>
                </el-form-item>
                <el-form-item label="角色名称">
                    <el-input v-model="addform.roleName"></el-input>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input v-model="form.notices"></el-input>
                </el-form-item>
                <el-form-item label="权限配置">
                    <el-select v-model="addform.auth" placeholder="请选择">
                        <el-option key="0" label="冻结" value="0"></el-option>
                        <el-option key="1" label="正常" value="1"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="addVisible = false">关 闭</el-button>
                <el-button type="primary" @click="saveAdd">保 存</el-button>
            </span>
        </el-dialog>

        <!-- 编辑弹出框 -->
        <el-dialog title="编辑角色" :visible.sync="editVisible" width="30%">
            <el-form ref="form" :model="form" label-width="100px">
                <el-form-item label="角色编号">
                    <el-input v-model="form.roleId"></el-input>
                </el-form-item>
                <el-form-item label="角色名称">
                    <el-input v-model="form.roleName"></el-input>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input v-model="form.notices"></el-input>
                </el-form-item>
                <el-form-item label="权限配置">
                    <el-select v-model="form.auth" placeholder="请选择">
                        <el-option key="0" label="冻结" value="0"></el-option>
                        <el-option key="1" label="正常" value="1"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editVisible = false">关 闭</el-button>
                <el-button type="primary" @click="saveEdit">保 存</el-button>
            </span>
        </el-dialog>

        <!-- 删除提示框 -->
        <el-dialog title="删除角色" :visible.sync="delVisible" width="300px" center>
            <div class="del-dialog-cnt">是否确认删除该角色？</div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="delVisible = false">取 消</el-button>
                <el-button type="primary" @click="deleteRow">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
    export default {
        name: 'basetable',
        data() {
            return {
                url: './static/vuetable.json',
                tableData: [{
                    roleId: '1',
                    roleName:'王小虎',
                    manager: '王小虎',
                    notices: '13869693636',
                    auth: '1'
                  }, {
                    roleId: '2',
                    roleName:'王小虎',
                    manager: '王小虎',
                    notices: '13869693636',
                    auth: '1'
                  }, {
                    roleId: '3',
                    roleName:'王小虎',
                    manager:'王小虎',
                    notices: '13869693636',
                    auth: '1'
                  }, {
                    roleId: '4',
                    roleName:'王小虎',
                    manager: '王小虎',
                    notices: '13869693636',
                    auth: '1'
                  }],
                multipleSelection: [],
                select_cate: '',
                select_word: '',
                del_list: [],
                is_search: false,
                addVisible:false,
                editVisible: false,
                delVisible: false,
                form: {
                    roleId: '',
                    roleName:'',
                    manager: '',
                    notices: '',
                    auth: ''
                },
                addform:{
                    roleId: '',
                    roleName:'',
                    manager: '',
                    notices: '',
                    auth: ''
                },
                idx: -1,
                currentPage:4,
            }
        },
        created() {
            // this.getData();
        },
        computed: {
            data() {
                return this.tableData.filter((d) => {
                    let is_del = false;
                    for (let i = 0; i < this.del_list.length; i++) {
                        if (d.name === this.del_list[i].name) {
                            is_del = true;
                            break;
                        }
                    }
                    if (!is_del) {
                        return d;
                    }
                })
            }
        },
        methods: {
            tableRowClassName({row, rowIndex}) {
                if (rowIndex === 1) {
                    return 'warning-row';
                } else if (rowIndex === 3) {
                    return 'success-row';
                }
                return '';
            },
            // 分页导航
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
            },
            getData() { // 获取数据
                // 开发环境使用 easy-mock 数据，正式环境使用 json 文件
                if (process.env.NODE_ENV === 'development') {
                    // this.tableData = res.data.list;
                };
            },
            search() {
                this.is_search = true;
            },
            filterStates(row, column) {
                let txt = '';
                if(row.states === '0'){
                    txt = '异常'
                } else if(row.states === '1'){
                    txt = '冻结'
                }
                return txt;
            },
            filterRole(row, column) {
                let txt = '';
                if(row.role === '0'){
                    txt = '管理员'
                } else if(row.role === '1'){
                    txt = '代理商'
                } else if(row.role === '2'){
                    txt = '商户'
                }
                return txt;
            },
            filterTag(value, row) {
                return row.tag === value;
            },
            handleAdd() {
                this.addVisible = true;
            },
            handleEdit(index, row) {
                this.idx = index;
                const item = this.tableData[index];
                this.form = {
                    roleId: item.roleId,
                    roleName:item.roleName,
                    manager: item.manager,
                    notices: item.notices,
                    auth: item.auth
                }
                this.editVisible = true;
            },
            handleDelete(index, row) {
                this.idx = index;
                this.delVisible = true;
            },
            delAll() {
                const length = this.multipleSelection.length;
                let str = '';
                this.del_list = this.del_list.concat(this.multipleSelection);
                for (let i = 0; i < length; i++) {
                    str += this.multipleSelection[i].name + ' ';
                }
                this.$message.error('删除了' + str);
                this.multipleSelection = [];
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            // 保存新增
            saveAdd() {
                this.addVisible = false;
                this.$message.success(`新增成功`);
            },
            // 保存编辑
            saveEdit() {
                this.$set(this.tableData, this.idx, this.form);
                this.editVisible = false;
                this.$message.success(`修改第 ${this.idx+1} 行成功`);
            },
            // 确定删除
            deleteRow(){
                this.tableData.splice(this.idx, 1);
                this.$message.success('删除成功');
                this.delVisible = false;
            }
        }
    }

</script>

<style scoped>
    .handle-box {
        margin-bottom: 20px;
    }

    .handle-select {
        width: 120px;
    }

    .handle-input {
        width: 300px;
        display: inline-block;
    }
    .del-dialog-cnt{
        font-size: 16px;
        text-align: center
    }
    .table{
        width: 100%;
        font-size: 14px;
    }
    .red{
        color: #ff0000;
    }
    .el-table .warning-row {
        background: oldlace;
    }

    .el-table .success-row {
        background: #f0f9eb;
    }
</style>
